<template>
  <div class="checked-page">
    <div class="checked-title">已审核课题</div>
    <div class="search-bar">
      <el-input v-model="search" placeholder="请输入课题名称" class="search-input" clearable />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>
    <el-table :data="filteredData" style="width: 100%" border>
      <el-table-column prop="id" label="课题编号" width="100" />
      <el-table-column prop="title" label="课题名称" width="260">
        <template #default="scope">
          <el-link type="primary">{{ scope.row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="student" label="学生上限" width="120" />
      <el-table-column prop="teacher" label="指导教师" width="160" />
      <el-table-column prop="source" label="课题来源" width="120" />
      <el-table-column prop="type" label="课题类型" width="120" />
      <el-table-column prop="status" label="课题状态" width="120">
        <template #default="scope">
          <el-tag type="success">已审批</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="selectStatus" label="选题状态" width="120" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" link size="small">指定学生</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-bar">
      <el-pagination
        background
        layout="prev, pager, next, jumper, ->, total"
        :total="filteredData.length"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const search = ref('')
const currentPage = ref(1)
const pageSize = 10
const tableData = ref([
  { id: 1, title: '基于java的鲜花商城系统的设计与实现', student: '', teacher: '20080040张三三', source: '教师科研', type: '软件设计类', status: '已审批', selectStatus: '未被选择' },
  { id: 2, title: '学生管理系统', student: '', teacher: '20080040张三三', source: '教师科研', type: '软件设计类', status: '已审批', selectStatus: '未被选择' }
])
const filteredData = computed(() => {
  let data = tableData.value
  if (search.value) {
    data = data.filter(row => row.title.includes(search.value))
  }
  // 分页
  const start = (currentPage.value - 1) * pageSize
  return data.slice(start, start + pageSize)
})
function handleSearch() {
  currentPage.value = 1
}
function handlePageChange(page) {
  currentPage.value = page
}
</script>

<style scoped>
.checked-page {
  max-width: 1200px;
  margin: 40px auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 32px 32px 24px 32px;
}
.checked-title {
  font-size: 26px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 32px;
}
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.search-input {
  width: 260px;
  margin-right: 16px;
}
.pagination-bar {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}
</style>
